import React, { useEffect, useState, } from 'react'
import { useNavigate } from 'react-router-dom'
// 引入组件
import { Card, Form, Input, Button, Table, message, Spin } from 'antd'
// 引入字体图标
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
// 表格组件
import type { ColumnsType } from 'antd/es/table';
import hospitalListApi, { type HospitalPageListData, HospitalSetListData, HospitalSetData } from '@/api/hospital/model/hospitalSet';

// 最上方的form组件的函数
const onFinish = (values: any) => {
    // console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
    // console.log('Failed:', errorInfo);
};

export default function HospitalSet() {
    // 当前页
    const [page, setPage] = useState<number>(1);
    // 页大小
    const [limit, setLimit] = useState<number>(5)
    // 总数
    const [total, setTotal] = useState<number>(0)
    // 用来接收列表数据
    const [pageList, setPageList] = useState<HospitalSetListData>([])
    // 复选框
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    // 获取navigate  这个useNavigate必须要在函数组件或者是类组件中使用
    const navigate = useNavigate()
    // 获取复选框选中的数据
    const [idList, setIdList] = useState<any>([])
    // 批量删除的禁用和亮起
    // const [deletes, setDelete] = useState(true)
    // 点击搜索的名字
    const [hosname, setHosname] = useState('')
    // 点击搜索的编码
    const [hoscode, setHosCode] = useState('')
    // 加载
    const [loading, setLoading] = useState(false)


    // 表格组件需要的数据
    const columns: ColumnsType<HospitalSetData> = [
        {
            title: '序号',
            key: 'id',
            render: (_, $, index) => <a>{index + 1}</a>,
            align: "center",
            width: '80px'
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
            width: '208px'
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
            width: '208px'
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
            width: '208px'
        },
        {
            title: '签名',
            dataIndex: 'signKey',
            width: '208px'
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
            width: '208px'
        },
        {
            title: '联系人手机号',
            dataIndex: 'contactsPhone',
            width: '208px'
        },
        {
            title: '操作',
            dataIndex: 'address',
            fixed: 'right',
            width: '120px',
            render: (text, record, index) => (
                // render中return的是结构  必须要有一个根标签
                <div>
                    <Button type='primary' icon={<EditOutlined />} style={{ marginRight: '10px' }} onClick={() => {
                        navigate(`/syt/hospital/hospitalSet/edit/${record.id}`, {
                            replace: true,
                            state: record
                        })
                    }}></Button>
                    <Button type='primary' danger icon={<DeleteOutlined />} onClick={async () => {
                        // 删除某条医院设置
                        try {
                            await hospitalListApi.removeHospitalSet(String(record.id))
                            // 删除成功之后进行提示，并且重新获取分页列表
                            message.success('删除成功')
                            getPageList({ page, limit })
                        } catch (error) {
                            message.success('删除失败')
                        }

                    }}></Button>
                </div>
            ),
        }
    ];
    // 生命周期
    useEffect(() => {
        // 挂载
        // 挂载的时候把上一次的本地存储清除掉，不然下一次点击添加会是上一次的数据
        // 发送请求获取医院设置列表
        getPageList({ page, limit })

        return () => {
            // 卸载
        }
    }, [])

    // 获取设置列表   医院搜索名称和编号也可以用来搜索
    async function getPageList({ page = 1, limit = 5, hosname = '', hoscode = '' }: HospitalPageListData) {
        setLoading(true)
        setPageList([])
        setTotal(0)
        let reslut;
        try {
            // 判断是不是搜索的
            if (hosname || hoscode) {
                reslut = await hospitalListApi.getPageList({ page, limit, hosname, hoscode })
                // console.log(reslut);
            } else {
                reslut = await hospitalListApi.getPageList({ page, limit })
            }
            setPageList(reslut.records)
            setTotal(reslut.total)
            setLoading(false)
        } catch (error) {

        }
    }
    // 跳转到添加医院设置
    const toAddHospitaalset = () => {
        navigate('/syt/hospital/hospitalSet/add', {
            replace: true,
        })
    }
    // 表格的函数
    const rowSelection = {
        // 点击复选框选中的数据 返回一个数组  里面的对象是选中的数据
        onChange: (selectedRowKeys: React.Key[], selectedRows: HospitalSetData[]) => {
        },
        // 用来获取复选框的函数
        getCheckboxProps: (record: HospitalSetData) => ({
            disabled: record.hosname === 'Disabled User', // Column configuration not to be checked
            name: record.hosname,
        }),
    };
    return (
        <Card>
            {/* 搜索 */}
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                layout='inline'
            >
                <Form.Item
                    wrapperCol={{ span: 24 }}
                    name="hospitalName"
                >
                    <div>
                        <Input placeholder='请输入医院名称' value={hosname} onChange={(e) => {
                            setHosname(e.target.value)
                        }} />
                    </div>
                </Form.Item>
                <Form.Item
                    wrapperCol={{ span: 24 }}
                    name="hospitalName"
                >
                    <div>
                        <Input placeholder='请输入医院编码' value={hoscode} onChange={(e) => {
                            setHosCode(e.target.value)
                        }} />
                    </div>
                </Form.Item>

                <Form.Item wrapperCol={{ span: 0 }}>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={() => {
                        getPageList({ hosname, hoscode })
                    }}>查询</Button>
                </Form.Item>
                <Form.Item wrapperCol={{ span: 0 }}>
                    <Button htmlType="submit" onClick={() => {
                        setHosCode('');
                        setHosname('');
                        // 清空之后返回原本的第一页
                        getPageList({ page, limit })
                    }}>清空</Button>
                </Form.Item>
            </Form>
            {/* 添加和批量删除按钮 */}
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                autoComplete="off"
                layout='inline'
                style={{ margin: '20px 0' }}
            >
                <Form.Item>
                    <Button type="primary" onClick={toAddHospitaalset}>添加</Button>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" danger disabled={!idList.length} onClick={async () => {
                        await hospitalListApi.deleteHospitalSet(idList as number[])
                        message.success('删除成功')
                        // // 重新获取列表
                        await getPageList({ page, limit })
                    }}>批量删除</Button>
                </Form.Item>
            </Form>

            {/* 数据展示的表格 */}

            <Spin spinning={loading} size='large'>
                <Table
                    rowSelection={{
                        type: selectionType,
                        // ...rowSelection,
                        onChange: (selectedRowKeys, selectedRows) => {
                            // console.log(selectedRowKeys, selectedRows);
                            setIdList(selectedRowKeys)
                        }
                    }}
                    rowKey={record => record.id}
                    columns={columns}
                    dataSource={pageList}
                    tableLayout='fixed'
                    scroll={{ x: '1200px', }}
                    bordered
                    pagination={{
                        total,
                        pageSize: limit,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        showTotal: () => `总共:${total}条`,
                        pageSizeOptions: ['3', '5', '10'],
                        onChange: async (page, pageSize) => {
                            // console.log(page, pageSize);
                            // 点击某些页码之后重新获取最新页码和页大小
                            setPage(page)
                            setLimit(pageSize)
                            // 清空上一次的列表数据 否则会报错，因为我们一旦切换了页大小  就是重新发送请求，当前页的大小发生改变  然后总数和数据条数会不想与 会产生警告
                            setPageList([])
                            // 获取结束之后需要重新发送请求 根据最新的数据发送请求
                            await getPageList({ page, limit: pageSize })
                        }
                    }}
                />
            </Spin>




        </Card >
    )
}
